<template>
    <div>
      <div class="bg-white grid-content">
        
      </div>
      <div class="bg-white grid-content">
  
        <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick">
          <el-tab-pane label="应急培训计划" name="first">
            <el-table
                :data="pxjhData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
                <el-table-column align="center" prop="jgmc" label="组织机构">
                </el-table-column>
                <el-table-column align="center" prop="pxmc" label="培训名称">
                </el-table-column>
                <el-table-column align="center" prop="pxdx" label="培训对象">
                </el-table-column>
                <el-table-column align="center" prop="pxnr" label="培训内容">
                </el-table-column>
                <el-table-column align="center" prop="pxdd" label="培训地点">
                </el-table-column>
                <el-table-column align="center" prop="fzr" label="培训负责人">
                </el-table-column>
                <el-table-column align="center" prop="pxrq" label="计划培训时间">
                </el-table-column>
                <el-table-column align="center" prop="bz" label="备注">
                </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="应急培训记录" name="second">
            <el-table
                :data="pxjlData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
            <el-table-column align="center" prop="jgmc" label="组织机构">
            </el-table-column>
            <el-table-column align="center" prop="pxmc" label="培训名称">
            </el-table-column>
            <el-table-column align="center" prop="pxdx" label="培训对象">
            </el-table-column>
            <el-table-column align="center" prop="pxnr" label="培训内容">
            </el-table-column>
            <el-table-column align="center" prop="pxdd" label="培训地点">
            </el-table-column>
            <el-table-column align="center" prop="fzr" label="培训负责人">
            </el-table-column>
            <el-table-column align="center" prop="pxrq" label="培训时间">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="应急演练计划" name="third">
            <el-table
                :data="yljhData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
            <el-table-column align="center" prop="jgmc" label="组织机构">
            </el-table-column>
            <el-table-column align="center" prop="rq" label="日期">
            </el-table-column>
            <el-table-column align="center" prop="ylmc" label="演练名称">
            </el-table-column>
            <el-table-column align="center" prop="gmrs" label="规模人数">
            </el-table-column>
            <el-table-column align="center" prop="ylrq" label="演练时间">
            </el-table-column>
            <el-table-column align="center" prop="yldd" label="演练地点">
            </el-table-column>
            <el-table-column align="center" prop="ylxs" label="演练形式">
            </el-table-column>
            <el-table-column align="center" prop="fzr" label="演练负责人">
            </el-table-column>
            <el-table-column align="center" prop="lxr" label="演练联系人">
            </el-table-column>
            <el-table-column align="center" prop="lxdh" label="联系电话">
            </el-table-column>
            <el-table-column align="center" prop="cydw" label="参演单位">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="应急演练记录" name="fourth">
            <el-table
                :data="yljlData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
            <el-table-column align="center" prop="jgmc" label="组织机构">
            </el-table-column>
            <el-table-column align="center" prop="rq" label="日期">
            </el-table-column>
            <el-table-column align="center" prop="ylmc" label="演练名称">
            </el-table-column>
            <el-table-column align="center" prop="gmrs" label="规模人数">
            </el-table-column>
            <el-table-column align="center" prop="ylrq" label="演练时间">
            </el-table-column>
            <el-table-column align="center" prop="yldd" label="演练地点">
            </el-table-column>
            <el-table-column align="center" prop="ylxs" label="演练形式">
            </el-table-column>
            <el-table-column align="center" prop="fzr" label="演练负责人">
            </el-table-column>
            <el-table-column align="center" prop="lxr" label="演练联系人">
            </el-table-column>
            <el-table-column align="center" prop="lxdh" label="联系电话">
            </el-table-column>
            <el-table-column align="center" prop="cydw" label="参演单位">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="应急物资基础" name="fifth">
            <el-table
                :data="wzbaseData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
            <el-table-column align="center" prop="jgmc" label="组织机构">
            </el-table-column>
            <el-table-column align="center" prop="wzid" label="物资ID">
            </el-table-column>
            <el-table-column align="center" prop="wzmc" label="物资名称">
            </el-table-column>
            <el-table-column align="center" prop="wzbm" label="物资编码">
            </el-table-column>
            <el-table-column align="center" prop="ggxh" label="规格型号">
            </el-table-column>
            <el-table-column align="center" prop="dj" label="单价">
            </el-table-column>
            <el-table-column align="center" prop="sl" label="数量">
            </el-table-column>
            <el-table-column align="center" prop="jsdw" label="计数单位">
            </el-table-column>
            <el-table-column
            align="center"
            prop="cfwz"
            label="存放位置"
            >
            </el-table-column>
            <el-table-column align="center" prop="yt" label="用途">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="应急物资使用" name="sixth">
            <el-table
                :data="wzsyData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
            <el-table-column align="center" prop="jgmc" label="组织机构">
            </el-table-column>
            <el-table-column align="center" prop="wzid" label="物资ID">
            </el-table-column>
            <el-table-column align="center" prop="sysj" label="使用时间">
            </el-table-column>
            <el-table-column align="center" prop="sl" label="数量">
            </el-table-column>
            <el-table-column align="center" prop="wzqx" label="物资去向">
            </el-table-column>
            <el-table-column align="center" prop="sydw" label="使用单位">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="应急物资补充" name="seventh">
            <el-table
                :data="wzbcData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
            <el-table-column align="center" prop="jgmc" label="组织机构">
            </el-table-column>
            <el-table-column align="center" prop="wzid" label="物资ID">
            </el-table-column>
            <el-table-column align="center" prop="bcsj" label="补充时间">
            </el-table-column>
            <el-table-column align="center" prop="sl" label="数量">
            </el-table-column>
            <el-table-column align="center" prop="fzr" label="负责人">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="应急物资检查" name="eighth">
            <el-table
                :data="wzjcData"
                :header-cell-style="{ background: '#F5F7FA', color: '#909399' }"
                border
            >
            <el-table-column align="center" prop="jgmc" label="组织机构">
            </el-table-column>
            <el-table-column align="center" prop="wzid" label="物资ID">
            </el-table-column>
            <el-table-column align="center" prop="bcsj" label="补充时间">
            </el-table-column>
            <el-table-column align="center" prop="sl" label="数量">
            </el-table-column>
            <el-table-column align="center" prop="yf1" label="一月">
            </el-table-column>
            <el-table-column align="center" prop="yf2" label="二月">
            </el-table-column>
            <el-table-column align="center" prop="yf3" label="三月">
            </el-table-column>
            <el-table-column align="center" prop="yf4" label="四月">
            </el-table-column>
            <el-table-column align="center" prop="yf5" label="五月">
            </el-table-column>
            <el-table-column align="center" prop="yf6" label="六月">
            </el-table-column>
            <el-table-column align="center" prop="yf7" label="七月">
            </el-table-column>
            <el-table-column align="center" prop="yf8" label="八月">
            </el-table-column>
            <el-table-column align="center" prop="yf9" label="九月">
            </el-table-column>
            <el-table-column align="center" prop="yf10" label="十月">
            </el-table-column>
            <el-table-column align="center" prop="yf11" label="十一月">
            </el-table-column>
            <el-table-column align="center" prop="yf12" label="十二月">
            </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
  
    </div>
  </template>
  
  <script>
  import zzjgApi from "@/api/jcsj/jcsy/zzjg";

  import yjpxjhsjApi from "@/api/jcsj/aqyx/yj/yjpxjhsj";
  import yjpxjlsjApi from "@/api/jcsj/aqyx/yj/yjpxjlsj";
  import yjyljhsjApi from "@/api/jcsj/aqyx/yj/yjyljhsj";
  import yjyljlsjApi from "@/api/jcsj/aqyx/yj/yjyljlsj";
  import yjwzjcsjApi from "@/api/jcsj/aqyx/yj/yjwzjcsj";
  import yjwzsysjApi from "@/api/jcsj/aqyx/yj/yjwzsysj";
  import yjwzbcsjApi from "@/api/jcsj/aqyx/yj/yjwzbcsj";
  import yjwzjcjlsjApi from "@/api/jcsj/aqyx/yj/yjwzjcjlsj";

  import moment from "moment";
  
  export default {
    data() {
      return {
        currentDay:moment().format("YYYY-MM-DD"),
        //获取机构列表
        jgList: [],
        activeName: 'first',
  
        searchForm: {
        //   searchDate:'',
          jgid:'',
        },
  
        //应急培训计划
        pxjhData:[],
        //应急培训记录
        pxjlData:[],
        //应急演练计划
        yljhData:[],
        //应急演练记录
        yljlData:[],
        //应急物资基础
        wzbaseData:[],
        //应急物资使用
        wzsyData:[],
        //应急物资补充
        wzbcData:[],
        //应急物资检查
        wzjcData:[],
  
  
  
        //数据总条数
        total: 0,
        //当前页码
        pageNo: 1,
        // 分页数
        pageSize: 5,
  
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
  
      }
    },
    created() {
        this.searchJg();       
        this.searchPxjh();
        this.searchPxjl();
        this.searchYljh();
        this.searchYljl();
        this.searchWzbase();
        this.searchWzsy();
        this.searchWzbc();
        this.searchWzjc();
    },
    mounted(){

    },
    methods: {
        //查询机构列表
        async searchJg() {
            //发送查询请求
            let res = await zzjgApi.getList({ pageNo: -1, pageSize: -1 });
            //判断是否成功
            if (res.success) {
                //赋值
                this.jgList = res.data.records;
                //总数量
            }
        },
        //条件查询
        query(){
            console.log(this.searchForm.jgid);
            this.searchPxjh(this.searchForm.jgid);
            this.searchPxjl(this.searchForm.jgid);
            this.searchYljh(this.searchForm.jgid);
            this.searchYljl(this.searchForm.jgid);
            this.searchWzbase(this.searchForm.jgid);
            this.searchWzsy(this.searchForm.jgid);
            this.searchWzbc(this.searchForm.jgid);
            this.searchWzjc(this.searchForm.jgid);

        },

        /**
         * 查询应急培训计划
         */
        async searchPxjh(jgid) {
            //发送查询请求
            let res = await yjpxjhsjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.pxjhData = res.data.records;
            }
        },
        /**
         * 查询应急培训记录
         */
         async searchPxjl(jgid) {
            //发送查询请求
            let res = await yjpxjlsjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.pxjlData = res.data.records;
            }
        },
        /**
         * 查询应急演练计划
         */
         async searchYljh(jgid) {
            //发送查询请求
            let res = await yjyljhsjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.yljhData = res.data.records;
            }
        },
        /**
         * 查询应急演练记录
         */
         async searchYljl(jgid) {
            //发送查询请求
            let res = await yjyljlsjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.yljlData = res.data.records;
            }
        },
        /**
         * 查询应急物资基础
         */
         async searchWzbase(jgid) {
            //发送查询请求
            let res = await yjwzjcsjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.wzbaseData = res.data.records;
            }
        },
        /**
         * 查询应急物资使用
         */
         async searchWzsy(jgid) {
            //发送查询请求
            let res = await yjwzsysjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.wzsyData = res.data.records;
            }
        },
        /**
         * 查询应急物资补充
         */
         async searchWzbc(jgid) {
            //发送查询请求
            let res = await yjwzbcsjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.wzbcData = res.data.records;
            }
        },
        /**
         * 查询应急物资检查
         */
         async searchWzjc(jgid) {
            //发送查询请求
            let res = await yjwzjcjlsjApi.getList({ pageNo:-1, pageSize:-1, jgid:jgid });
            //判断是否成功
            if (res.success) {
                //赋值
                this.wzjcData = res.data.records;
            }
        },
      

  
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.pageSize = val;
        //将每页显示的数量交给成员变量
        // this.search(this.pageNo, val);
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.pageNo = val;
        //调用查询方法
        // this.search(val, this.pageSize);
      },
      // 序号计算
      indexMethod (index) {
        // index默认在0开始，这里+1
        return index + 1 + (this.currentPage - 1) * this.pageSize
      },
  
      //Tab标签区域切换按钮事件
      handleMenuClick(tab, event){
        console.log(tab, event);
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
  }
  
  //按钮组
  .myButtons {
    float: right
  }
  
  //格子的样式
  .bg-white {
    background: #ffffff;
  }
  
  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  
  .calendar ::v-deep .el-button-group::before {
    display: none;
  }
  
  .calendar ::v-deep .el-button-group::after {
    display: none;
  }
  
  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }
  
  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  </style>
  